<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue指令</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			姓名:{{peopele.name}}<br />
			年龄: {{peopele.age}}<br />
			身高: {{peopele.h}}<br />
			体重:{{peopele.w}}
			<hr>
			<img width="200" src="img/t03.jpg" alt="">
			<br>
			<!-- 绑定 -->
			<img width="200" v-bind:src="url" alt="">
			<br>
			<img :width="width" :src="url" alt="">
			<br>
			<button v-on:click='width+=10'>+10</button>
			<button @click="width-=10">-10</button>
			<hr>
			<button v-on:click='width*=1.1'>放大10%</button>
			<button @click="width*=0.9">缩小10%</button>
			<hr>
			
			<div v-if="a%2==0">
				a是偶数
			</div>
			<div v-if="a%2!=0">
				a是奇数
			</div>
		</div>
		<hr>
		<p>
		张三
		<!-- <span v-if="people.age>=18">是</span>
		<span v-else>不是</span>
		成年人 -->
		 {{ peopele.age>=18?"是":"不是"}}
		 成年人
		</p>
		<p>
			{{a}}是 {{ a%2 == 0?"偶数":"奇数"}}
			
		</p>
		
		<script>
			
			const app= Vue.createApp({
				data() {/* 静态 */
					return{
						peopele:{
						name:'张三',
						age:19,
						h:175,
						w:45,						
					},
					url:'img/t01.jpg',
					width:200,
					a:9,
					
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>